<template>
  <div class="register-page">
    <div class="register-box">
      <div class="page-left" :style="{background: `${configData.bgColor}` }">
        <div class="logo-box">
          <div class="title" :style="{color: `${configData.fontColor}` }">{{ $t('assemble.欢迎来到网易标签订购系统') }} <span style="font-size:15px;">V2.0</span> </div>
          <div class="page-text" v-html="content">
            <!-- 每个行业都有自己相对特定的工具，工具也代表了这个行业的工作内容特点，这两年一直处于居家办公状态的我，对线上协同办公的产品要求会高很多，操作使用无门槛，交流沟通效率高、产品性能流畅强，很难去评价蓝湖产品的某项优点，因为它就是会在不断的重复使用的过程中冲击你的爽点。 -->
          </div>
        </div>

      </div>

      <div class="register-content">
        <div class="register-text">{{ $t('assemble.账号注册') }}</div>
        <div class="register-class">
          <div class="register-item" @click="goCompanyAccount">
            <img class="item-img" src="../../static/imgs/gs.png" alt="">
            <p class="item-text">{{ $t('assemble.公司账号') }}</p>
          </div>
          <div class="register-item" @click="goDepartmentAccount">
            <img class="item-img" src="../../static/imgs/bm.png" alt="">
            <p class="item-text">{{ $t('assemble.部门账号') }}</p>
          </div>
        </div>
        <div class="zhu">{{ $t('assemble.注初次注册账号请使用公司公共邮箱地址注册以避免员工离职造成无法找回密码') }}</div>

      </div>

    </div>
  </div>
</template>
<script>
import { onepage } from '../../utils/api'

export default {
  data() {
    return {
      content: "",
      configData: {},

    }
  },
  mounted() {
    this.genAboutus()
    this.configData = JSON.parse(localStorage.getItem('config'))

  },
  methods: {
    async genAboutus() {
      let res = await onepage({
        name: "loginbeief"
      })
      if (res.code == 1) {
        console.log("关于我们", res)
        this.content = res.data
      }
      if (res.code == 401) {
        this.$router.push({ path: '/login' })
      }

    },
    goCompanyAccount() {
      this.$router.push({ path: '/login/companyAccount' })
    },
    goDepartmentAccount() {
      this.$router.push({ path: '/login/departmentAccount' })

    }
  }

}
</script>
<style scoped lang="scss">
.register-page {
  width: 100vw;
  height: 100vh;
  background: #F8F8F8;
  border-radius: 0px 0px 0px 0px;

  .register-box {
    display: flex;
    align-items: center;

    .page-left {
      width: 400px;
      height: 100vh;
      // background: #E00000;
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      // padding: 434px 100px;
      box-sizing: border-box;

      .logo-box {
        // width: 158.42px;
        height: 56px;
        width: 100%;
        text-align: center;
        margin-top: 400px;


        .title {
          // width: 387px;
          width: 100%;
          text-align: center;
          height: 21px;
          font-size: 24px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: white;
          line-height: 28px;
          font-weight: bolder;
        }

        .page-text {
          font-size: 16px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 28px;
          margin-top: 30px;
          width: 100%;
          text-align: center;

        }

        .logo-img {
          width: 100%;
          height: 100%;
        }
      }


    }

    .register-content {
      width: 500px;
      height: 559px;
      background: #FFFFFF;
      box-shadow: 5px 0px 15px 0px rgba(224, 0, 0, 0.05);
      border-radius: 50px 50px 50px 50px;
      opacity: 1;
      margin-left: 260px;
      // padding-top: 116px;
      box-sizing: border-box;

      .register-text {
        font-size: 24px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 28px;
        // margin-left: 36px;
        padding: 50px;
        box-sizing: border-box;

      }

      .register-class {
        // display: flex;
        // margin-left: 175px;
        // margin-top: 129px;
        margin: 30px auto;
        margin-left: 70px;

        .register-item {
          width: 165px;
          height: 200px;
          border-radius: 10px 10px 10px 10px;
          opacity: 1;
          border: 1px solid #EDEDED;
          text-align: center;
          margin-right: 20px;
          cursor: pointer;
          display: inline-block;

          .item-img {
            width: 50px;
            height: 50px;
            font-size: 18px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 21px;
            margin-top: 63px;
          }
        }
      }

    }

    .zhu {
      width: 100%;
      height: 22px;
      font-size: 16px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #B1B1B1;
      line-height: 19px;
      margin: 102px auto;
      padding: 0 40px;
      box-sizing: border-box;
      text-indent: 40px;
    }

  }
}
</style>